<template>
  <div class="work-order-initiate">
    <h2>发起修理工单</h2>
    
    <el-form ref="repairFormRef" :model="repairForm" label-width="120px">
      <el-form-item label="工单编号">
        <el-input v-model="repairForm.orderNum" readonly></el-input>
      </el-form-item>
      <el-form-item label="工单类型">
        <el-input v-model="repairForm.orderType" readonly></el-input>
      </el-form-item>
      <el-form-item label="工单标题">
        <el-input v-model="repairForm.orderTitle" placeholder="请输入工单标题（选填）"></el-input>
      </el-form-item>
      <!-- 调换顺序后的相关设备字段 -->
      <el-form-item 
        label="相关设备 *" 
        prop="deviceType"
        :rules="[{ required: true, message: '请输入相关设备', trigger: 'blur' }]">
        <el-input v-model="repairForm.deviceType" placeholder="请输入相关设备"></el-input>
      </el-form-item>
      <!-- 调换顺序后的故障位置字段 -->
      <el-form-item label="故障位置">
        <el-input v-model="repairForm.deviceLocation" placeholder="请输入故障位置（选填）"></el-input>
      </el-form-item>
      <el-form-item label="详细描述">
        <el-input v-model="repairForm.faultDescription" type="textarea" placeholder="请输入详细描述（选填）"></el-input>
      </el-form-item>
      
      <el-form-item>
        <el-button type="primary" @click="submitRepairForm">提交</el-button>
        <el-button @click="resetRepairForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'

// 维修工单表单
const repairForm = ref({
  orderNum: '',
  orderType: '修理工单',
  orderTitle: '',
  deviceLocation: '',
  deviceType: '',
  faultDescription: ''
})

// 生成工单编号（保持不变）
const generateOrderNum = () => {
  const dateStr = new Date().toISOString().slice(0, 10).replace(/-/g, '')
  const randomCode = Math.floor(Math.random() * 9000) + 1000
  return `${dateStr}R${randomCode}`
}

// 页面加载时生成工单编号（保持不变）
onMounted(() => {
  repairForm.value.orderNum = generateOrderNum()
})

// 提交维修工单表单（修改验证逻辑）
const submitRepairForm = () => {
  if (!repairForm.value.deviceType) {
    ElMessage.error('请填写所有必填字段（带*号）')
    return
  }

  // 创建工单数据（字段顺序保持不变）
  const workOrderData = {
    orderNum: repairForm.value.orderNum,
    orderTitle: repairForm.value.orderTitle,
    orderType: repairForm.value.orderType,
    deviceLocation: repairForm.value.deviceLocation,
    deviceType: repairForm.value.deviceType,
    faultDescription: repairForm.value.faultDescription,
    orderStatus: '待派发',
    orderLeader: '未定',
    orderInitiator: '黄辉',
  }

  // 提交到后端（保持不变）
  axios.post('/api/repair-work-orders', workOrderData)
    .then(response => {
        ElMessage.success('修理工单提交成功！')
        resetRepairForm()
    })
    .catch(error => {
        if (error.response) {
            ElMessage.error(`提交失败: ${error.response.data.message || '服务器错误'}`)
        } else {
            ElMessage.error('网络连接异常')
        }
    })
}

// 重置维修工单表单（保持不变）
const resetRepairForm = () => {
  repairForm.value.orderNum = generateOrderNum()
  repairForm.value.orderTitle = ''
  repairForm.value.deviceLocation = ''
  repairForm.value.deviceType = ''
  repairForm.value.faultDescription = ''
}
</script>

<style scoped>
.work-order-initiate {
  padding: 20px;
}
</style>

<!-- 发起工单注意事项：
1. 必须信息：设备信息
2. 发起人的标识：ID。（避免重名） -->